本篇博客适用人群:爱捣鼓的小伙伴们。
一、运行环境
Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
- npm
NPM是随同的NodeJS一起安装的包管理工具,能解决的NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入“npm -v”来测试是否成功安装。
- 创建Github Pages
Github免费的静态站点,可以理解为GitHub官方提供的一个创建自己的静态网站/博客的方法。
登陆自己的GitHub账号并创建仓库,仓库命名格式为「yourusername.github.io」
验证是否安装成功
- git –version
- node -v
- npm -v
出现版本号则表明安装成功。
二、博客框架配置
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
打开Hexo官网,如下:
打开终端,执行如下操作。
安装hexo;
npm install hexo-cli -g
进入存放博客的目录,执行如下命令;
123hexo init blogcd blognpm install启动本地服务器进行预览。
hexo server
在浏览器中打开 http://localhost:4000/ ,就可以预览当前的效果,可以看到,hexo会有一篇默认的博客。
三、修改主题
- 选择主题
自带的主题看起来有点单调,我们可以选择其他主题。
hexo官网自带主题:https://hexo.io/themes/
github上的热门主题:
另外,如果你自己懂css,那么也可以自己写一个主题来用。
- 安装主题
安装主题三步走:
第一步:选择主题
假设现在我们选择了aircloud主题。
第二步:克隆主题到本地
aircloud的git库地址为:https://github.com/aircloud/hexo-theme-aircloud.git
,那么我们就可以进行如下操作:
第三步:修改配置文件
hexo初始化之后的blog中会有名为_config.yml的配置文件,一般我们需要对整个博客进行配置时(比如主题),在该文件中进行,文件中的配置项是以键值对的形式存在的,配置时注意键和值之间要留空(可以参考默认配置)。另外,主题也会有自己的配置文件,文件名同为_config.yml(theme文件夹下),千万不要和整个blog的配置文件搞混哦!主题配置可参考对应主题的官方文档。
注:本小结提到的配置文件_config.yml,除非特殊说明,否则均指整个博客的配置文件(blog目录下)。
基础配置如下:
|
|
更多属性配置可参考hexo官方文档。
预览一下我们修改后的效果吧,在blog目录下执行:hexo server
,进入浏览器访问http://localhost:4000/查看预览效果。
四、发布博客
安装自动部署工具
|
|
在blog\source\_posts文件夹中放入自己写好的Markdown文档,并在blog目录下执行如下命令:
|
|
命令执行完过几分钟后,打开yourusername.github.io
(运行环境中提到的Github Pages)便可以看到自己写的博客了。
注意事项
- 创建好仓库之后,要本地生成 SSH 秘钥,方便电脑上的 git 软件好提交内容到 Github 上。(如果之前有配置 过,则可以跳过这一步)
在终端中执行命令:ssh-keygen -t rsa -C "你的邮箱地址"
,根据提示(一般是连续点三次回车)操作,之后便可以在/c/Users/[你的用户名]/.ssh/id_rsa
文件中生成密钥,访问:https://github.com/settings/ssh,添加新密钥。 - 如果是第一次部署,终端会提示要求输入用户名和密码。以后发布博客的时候,可以直接在博客目录下执行
hexo clean & hexo g & hexo d
。
至此,我们已经可以正常写博客并随时随地在有网的地方进行访问了。但是 ,有的小伙伴可能觉得yourusername.github.io
这个网址太大众了,想要一个比较独(zhuang)特(bi)的网址,别急,接着往下看。
五、绑定域名
绑定域名之前,先得购买一个自己的域名,这里我自己用的是阿里云的域名服务。购买域名后,要对域名进行解析。
域名解析是把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站的一种服务。
简而言之,域名解析就是让你购买的域名指向yourusername.github.io
,下次访问购买的域名时就相当于是在访问你的GitHub Pages。
添加域名解析
登入阿里云(淘宝账号就可以哦),进入 管理控制台 –> 域名与网站 –> 域名 –> 域名列表 ,找到自己刚刚购买的域名,点击解析按钮进入解析页面。
点击添加解析:
填法如下:
记录类型:CNAME
主机记录:www
解析线路:默认
记录值:
yourusername.github.io
点击确认,添加完成后即时生效。
添加Github解析
在GitHub中进入「yourusername.github.io」仓库,在Settings –> GitHub Pages –> Custom domain 中输入自己的域名,点击保存。
至此,域名绑定完成。在地址栏中输入自己购买的域名即可以访问自己的博客了。不过有的人可能不那么顺利,输入域名后会弹出如下页面:
出现这种问题时,重新检查自己的域名解析和GitHub解析是否填写正确,如确认无误,等两分钟再访问,问题方可解决。